SVG ScreenshotをXMLで表現する
svgもxmlだけど表現力が豊かすぎるので、機能を限定した独自スキーマを考える
SVG Screenshotでの課題
svgは自由度が高すぎる & 記述をミスしやすい
描画方法の仕様変更に弱かったり
viewBox, width, x を忘れたり
scriptが埋め込まれたり
いますぐ表示できるサンプルXML
<web-image>ドキュメント
リンク情報などの事実を淡々と書くだけでいい
描画スタイルに関することを書かなくてすむ
https://gyazo.com/82e8a61c08e7e7090bfef06201bb210c/raw
ChromeのDevToolsのNetworkタブでは変換後のSVGテキストしか確認でなくなった。XSLが作用する前の生のXMLドキュメントを見たい場合は、FirefoxのDevToolsかcurlコマンドを使うといい 2023/5/3
リポジトリ
以下、作業ログ
XSLは、XMLをブラウザでどう見せるかを定義するファイル 型をガチガチに定義する前に、exampleを書いたほうが良さそう daiiz.icon
理想形を先に書いて、定義をそれに合わせる。初学者だしね！
スタイル未定義なXML
「XMLとして体裁は成しているものの、styleは不明だよ」というChromeのビュー
https://gyazo.com/0cddcb19ea748511c9a689f4bb33c1a3/raw
XSLTを書いて、XMLから参照する
参照超簡単
<?xml version="1.0" encoding="utf-8"?>の下に<?xml-stylesheet type="text/xsl" href="../web-image.xsl"?>を書くだけ
本番は Domains, protocols and ports must match を守ること
開発中は適当なローカルhttpサーバー立てて相対パス参照で良い
Chromeだと file:// は許されない
書き方
スタイル当てられた
xmlが配信されて、内部で参照されているxslが適用される
https://gyazo.com/18c12c0b10b993dbe101aab0d2d26123
明示的にwidth, heightを与える必要があるものの、SVGとして表示できた
JSは一切書いていない
code:html
<object width="571" height="506" data="./pancake.xml"></object>
<iframe width="571" height="506" src="./pancake.xml"></iframe>
<embed width="571" height="506" src="./pancake.xml"></embed>
https://gyazo.com/af6d339cdcdf627cd051c8c4c1fed198
img要素では表示できない
上の実験結果からも分かる通り、いくらSVGとして描画するXSLTを定義しているとはいえ、さすがに無理だった
xml取得〜xslt適用までの流れをserverかServiceWorkerでやれば、clientにSVGコンテンツとして返せるのではないか table:web-image
操作 フォーマット
upload xml
download svg
upload時にスキーマを満たすことを検査できるので安全
GyakkyJS (server side) でxml+xsl → svgに変換して配信するデモ https://gyazo.com/42671bbed1eb3b30f80454872c5eb5ce/raw
https://gyakky.herokuapp.com/web-image/pancake.svg
無事、img要素で表示できた
